import Image from 'next/image';

import S from '../styles/Download.module.less';
import { useMemo, useState } from 'react';
import type { DownloadInfo } from './api/download_info';
import { request } from '../utils/index';


export default function Download() {
  const [infoList, setInfoList] = useState<DownloadInfo[]>([]);

  useMemo(async () => {
    const res = await request('/api/download_info', {});
    if (res != null) {
      const resData = res as DownloadInfo[];
      setInfoList(resData);
    }
  }, [])

  return (
    <>
      <style jsx global>{`
        #__next {
          background: linear-gradient(180deg, #D4E6FF, #FFFFFF);
        }
      `}</style>

      <div className={S.container}>
        {
          infoList.map((item, _k) => <div className={S.box} key={_k}>
            <div className={S.dt}>
              <Image src={item.icon} width='40' height='40' />{item.platform}
            </div>

            <ul className={S.desc}>
              <li>版本号：{item.version}</li>
              <li>发布时间：{item.releaseTime}</li>
              <li>大小：{item.size}</li>
            </ul>

            <a key={item.link} className={S.btn} href={item.link} target="_blank">
              下载{item.extraName}
            </a>

          </div>)
        }
      </div>
    </>
  )
}